<template>
  <div class="height-serve-total">
    <div class="container">
      <h1>亿拓专业团队贴身服务</h1>

      <ul>
        <li v-for="item in list" :key="item.id">
          <h1>{{ item.name }}</h1>
          <p>{{ item.details }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "heightServe",

  data() {
    return {
      list: [
        {
          id: 1,
          name: "行业内需求诊断",
          details: "根据行内需求诊断，提供个性化部署方案。",
        },
        {
          id: 2,
          name: "部署全程保障",
          details: "专业部署人员驻场，解决部署难题。",
        },
        {
          id: 3,
          name: "全程培训指导",
          details: "派专人一对一培训答疑，帮助企业快速上手。",
        },
        {
          id: 4,
          name: "现场使用培训",
          details:
            "指派专人进行产品的现场使用培训,保障企业客服运营人员正常使用。",
        },
        {
          id: 5,
          name: "后期运维复盘",
          details: "维护人员上门香秀部署后的系统运维情况，提供优化建议。",
        },
        {
          id: 6,
          name: "季度健康检查",
          details: "定期对部署后的系统全面检测，保障 系统稳定运行。",
        },
        {
          id: 7,
          name: "系统升级",
          details: "根据企业需求，对部署系统进行定期升级服务。",
        },
        {
          id: 8,
          name: "7x24小时服务",
          details: "专职运营经理、客服经理和技术经理提供专业解答及技术支持。",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.height-serve-total {
  width: 100%;
  li {
    list-style-type: none;
  }
  .container {
    width: 1250px;
    margin: 0 auto;
    h1 {
      margin: 80px 0 79px 0;
      font-size: 36px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #333333;
      text-align: center;
    }
    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
        margin-bottom: 100px;
    }
    li:hover {
         box-shadow: 1px 1px 10px #888888;
    }
    li {
      width: 264px;
      height: 280px;
      color: #fff;
      cursor: pointer;
      // border: 1px dashed #000;
      margin-bottom: 40px;
      border-radius: 8px;
      h1 {
        font-size: 20px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #333333;
        margin: 135px 0 23px 0;
      }
      p {
        // margin-top: 181px;
        text-align: center;
        padding: 0 23px;
        font-size: 16px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #999999;
        line-height: 24px;
      }
    }
    li:nth-child(1) {
      background: url("../assets/img/hServe_img5.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(2) {
      background: url("../assets/img/hServe_img6.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(3) {
      background: url("../assets/img/hServe_img7.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(4) {
      background: url("../assets/img/hServe_img4.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(5) {
      background: url("../assets/img/hServe_img2.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(6) {
      background: url("../assets/img/hServe_img1.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(7) {
      background: url("../assets/img/hServe_img3.png") no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(8) {
      background: url("../assets/img/hServe_img8.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
}
</style>